<template>
  <div class="register-container">
    <el-form class="registerForm" :model="registerRuleForm" :rules="registerRules" ref="registerForm">
      <h1>账号注册</h1>
      <el-form-item prop="username">
        <el-input v-model="registerRuleForm.username" type="text" placeholder="账号" />
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="registerRuleForm.password" type="password" placeholder="密码" />
      </el-form-item>
      <el-form-item prop="repassword">
        <el-input v-model="registerRuleForm.repassword" type="password" placeholder="请确认密码" />
      </el-form-item>
      <el-form-item prop="isAgree">
        <el-checkbox v-model="registerRuleForm.isAgree" >我已阅读并同意用户协议和隐私条款</el-checkbox>
        <a @click="goLogin">已有账号?去登录</a>
      </el-form-item>
      <button @click="sendRegister">注册</button>
    </el-form>
  </div>
</template>
<script>
import { register } from "@/api/user.js";
export default {
  name: "myRegister",
  data() {
    // 定义一个密码校验是否相同的方法
    const validatorPwd = (rule, value, callBack) => {
      if (value != this.registerRuleForm.password) {
        callBack(new Error("两次输入密码不一致"));
      } else {
        callBack();
      }
    };
    return {
      registerRuleForm: {
        username: "",
        password: "",
        repassword: "",
        isAgree:false
      },
      registerRules: {
        username: [
          { required: true, message: "请输入注册账号", trigger: "blur" },
          { min: 4, max: 8, message: "长度在 4 到 8 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 8, max: 16, message: "长度在 8 到 16 个字符", trigger: "blur" }
        ],
        repassword: [
          { required: true, message: "请确认密码", trigger: "blur" },
          {
            min: 8,
            max: 16,
            message: "长度在 8 到 16 个字符",
            trigger: "blur"
          },
          { validator: validatorPwd, trigger: "blur" }
        ],
        isAgree:[
          { 
            // 自定义校验规则
            // 验证通过callback
            // 验证失败callback(new Error('err'))
            validator:(rule,value,callback)=>{
              if(value){
                callback()
              }else {
                callback(new Error('请阅读后考虑是否勾选同意用户协议'))
              }
            },
             trigger: "change"
             },
        ]
      }
    };
  },
  methods: {
    // 点击跳转到登录页面
    goLogin() {
      this.$router.push("/login");
    },
    // 点击发送注册请求
    sendRegister() {
      this.$refs.registerForm.validate((valid, obj) => {
        if (valid) {
          // 发送请求
          this.register();
        }
      });
    },
    // 注册请求封装
    async register() {
      const params = {
        username: this.registerRuleForm.username,
        password: this.registerRuleForm.password
      };
      const res = await register(params);
      console.log(res.data);
      if (res.data.code == 200) {
        this.$router.push('/login')
      }
    }
  }
};
</script>
<style lang="less" scoped>
.register-container {
  height: 100vh;
  background: linear-gradient(#152035, #233b59);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: #03e9f4;
  //form表单
  .registerForm {
    width: 400px;
    box-sizing: border-box;
    padding: 15px;
    // background: #152035;
    ::v-deep .el-input__inner {
      width: 100%;
      height: 40px;
      border: none;
      background: none;
      border-bottom: #03e9f4 1px solid;
      border-radius: 0%;
      color: white;
      font-size: 16px;
      margin-top: 10px;
      padding: 0%;
    }
    .el-form-item {
      margin-bottom: 7px;
    }
    a {
      font-size: 14px;
      cursor: pointer;
      margin-left: 22px;
    }
    ::v-deep .el-checkbox__label {
      margin-top: 10px;
    }
    ::v-deep .el-checkbox__label {
    padding-left: 3px;
    }
    ::v-deep .el-form-item__content {
    line-height: 0px; 
    
    }
    button {
      width: 100%;
      height: 40px;
      border: none;
      background: #03e9f4;
      outline: none;
      margin-top: 20px;
      margin-left: 2px;
      font-size: 18px;
      cursor: pointer;
    }
  }
}
</style>